<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>我的收藏</title>
     <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css" />

    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>

</head>

<body>
   	<!--页面顶部白条条，由js动态加载-->
	<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
	<div class="nav-bottom"></div>
    <script type="text/javascript">$(".nav-bottom").load("top.html");</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
</body>
    <!--header-->
    <div id="account">
        <div class="py-container" id="collectionApp">
            <div class="yui3-g collect">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo"><img src="img/_/photo.png" alt=""></div>
                        <div class="person-account">
                            <span class="name">Michelle</span>
                            <span class="safe">账户安全</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="list-items">
                        <dl>
							<dt><i>·</i> 订单中心</dt>
							<dd ><a href="home-index.html"   >我的订单</a></dd>
							<dd><a href="home-order-pay.html" >待付款</a></dd>
							<dd><a href="home-order-send.html"  >待发货</a></dd>
							<dd><a href="home-order-receive.html" >待收货</a></dd>
							<dd><a href="home-order-evaluate.html" >待评价</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 我的中心</dt>
							<dd><a href="#" class="list-active" @click.prevent="queryCollections()">我的收藏</a></dd>
							<dd><a href="home-person-footmark.html">我的足迹</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 物流消息</dt>
						</dl>
						<dl>
							<dt><i>·</i> 设置</dt>
							<dd><a href="home-setting-info.html">个人信息</a></dd>
							<dd><a href="home-setting-address.html"  >地址管理</a></dd>
							<dd><a href="home-setting-safe.html" >安全管理</a></dd>
						</dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6 goods">
                    <div class="body">                   
                            <h4>收藏的商品</h4>
                            <div class="goods-list">
                                <ul class="yui3-g"  id="goods-list">
                                    <li class="yui3-u-1-4" v-for="(collection,i) in collections">
                                        <div class="list-wrap">
                                            <div class="p-img"><img :src="collection.images" alt=''></div>
                                            <div class="price"><strong><em>¥</em> <i>{{ly.formatPrice(collection.price)}}</i></strong></div>
                                            <div class="attr"><em>{{collection.title}}</em></div>
                                            <div class="cu"><em><span>最新价格</span>¥{{ly.formatPrice(collection.newSku.price)}}
                                                &nbsp&nbsp&nbsp<span>
                                                    {{collection.newSku.price === collection.price?"价格未变动":""}}
                                                    {{collection.newSku.price < collection.price?"已降价":""}}
                                                    {{collection.newSku.price > collection.price?"已升价":""}}
                                                    &nbsp&nbsp&nbsp{{collection.newSku===null?"已下架":""}}</span></em></div>
                                            <div class="operate">
                                                <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger" @click.prevent="addCart(i)">加入购物车</a>
                                                <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                                <a href="javascript:void(0);" class="sui-btn btn-bordered">降价通知</a>
                                                <a href="javascript:void(0);" class="sui-btn btn-bordered" @click.prevent="deleteCollections(collection.skuId,i)">取消收藏</a>
                                            </div>
                                        </div>
                                    </li >

                                </ul>
                            </div>

                        <!--猜你喜欢-->
                        <div class="like-title" v-if="flag1">
                            <div class="mt">
                                <span class="fl"><strong>猜你喜欢</strong></span>
                            </div>
                        </div>
                        <div class="like-list" v-if="flag1">
                            <ul class="yui3-g">
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/itemlike01.png" />
                                        </div>
                                        <div class="attr">
                                            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                        </div>
                                        <div class="price">
                                            <strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有6人评价</i>
                                        </div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/itemlike02.png" />
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
                                        </div>
                                        <div class="price">
                                            <strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有700人评价</i>
                                        </div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/itemlike03.png" />
                                        </div>
                                        <div class="attr">
                                            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                        </div>
                                        <div class="price">
                                            <strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有700人评价</i>
                                        </div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/itemlike04.png" />
                                        </div>
                                        <div class="attr">
                                            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                        </div>
                                        <div class="price">
                                            <strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有700人评价</i>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>

<!--                        分页栏-->
                        <div class="choose-order" v-if="flag2">
                            <div class="sui-pagination pagination-large top-pages">
                                <ul>
                                    <li :class="pagination.page<=1 ?'prev disabled':''" v-on:click="btnClick(pagination.page-1)"><a href="#">«上一页</a></li>
<!--                                    class="active"-->
                                    <li :class="pagination.page===index ?'active':''" v-for="index in totalPage" v-on:click="btnClick(index)"><a href="#">{{index}}</a></li>

<!--                                    <li class="dotted"><span>...</span></li>-->
                                    <li :class="pagination.page>=total ?'next disabled':''" v-on:click="btnClick(pagination.page+1)"><a href="#">下一页»</a></li>
                                </ul>
                                <div>
                                    <span>共{{total}}页&nbsp;</span>
<!--                                    <span>到<input type="text" class="page-num"><button class="page-confirm" v-on:click="btnClick(value)">确定</button>页</span>-->
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    const collectVm = new Vue({
        el: "#collectionApp",
        data: {
            ly,
            collections: [], //返回的收藏对象集合,包含了最新sku信息,如果newSku为空代表该sku下架了或者被修改了
            user: null,
            total: 0,        //总记录数
            totalPage: 0,    //总页数
            flag1: false,    //猜你喜欢显示标记
            flag2: false,    //分页栏显示标记
            pagination: {    // 分页信息
                page: 1,
                rows: 2
            },
            // newSkuList:[]  //最新sku信息集合
        },
        async created() {
            try {
                const resp = await ly.http.get("/auth/verify");
                this.user = resp.data;
            } catch {
            }
            this.queryCollections();
        },
        methods: {
            //判断用户是否登录以及登录是否过期
            isLogin() {
                return new Promise((resolve, reject) => {
                    ly.http.get("/auth/verify").then(resp => {
                        resolve(resp);
                    }).catch(error => {
                        if (this.user) {
                            // 重新登录
                            console.log("已过期");
                            window.location.href = "http://www.leyou.com/login.html?returnUrl=" + window.location.href;
                        }
                        reject(error);
                    })
                });
            },
            //查询用户收藏
            queryCollections(){
                this.isLogin()
                    .then(() => {
                        // 已登录
                        ly.http.get("/cart/queryMyCollections",{
                            params: {
                                page:this.pagination.page,
                                rows:this.pagination.rows,
                            }
                        })
                            .then((response) => {
                                this.collections = response.data.items;
                                this.total=response.data.total;
                                this.totalPage=response.data.totalPage;
                                this.flag2=true;
                                //查询收藏内容后再去查找最新的sku信息
                                // let ids="";
                                // for (let collection of this.collections){
                                //     console.log(collection);
                                //     ids+=(collection.skuId+",");
                                // }
                                // console.log(ids);
                                // this.queryNewSkus(ids);
                            }).catch((response) => {
                            //判断是否有收藏内容
                            let message = response.response.data.message;
                            if (message === "商品不存在！") {
                                alert("亲,您的收藏为空哦,为您推荐喜欢!");
                                this.flag1=true;
                                this.flag2=true;
                            } else {
                                alert("查询出现异常!");
                            }
                        });
                    })
                    .catch(() => {
                        // 未登录
                        alert("登录过期,请重新登录");
                        window.location.href = "http://www.leyou.com/login.html?returnUrl=" + window.location.href;
                })
            },
            //查询最新的sku信息
            queryNewSkus(ids){
                console.log(ids);
                ly.http.get("/item/sku/list",{
                    params: {
                        ids:ids
                    }
                })
                    .then(response => {
                        this.newSkuList = response.data;

                    })
                    .catch(response => {
                    alert("获取最新商品信息出现异常!")
                })
            },
            //取消收藏
            deleteCollections(spuId, i) {
                this.isLogin()
                    .then(() => {
                        // 已登录
                        ly.http.delete("/cart/deleteCollections/" + spuId)
                            .then((response) => {
                                const id = this.collections[i].skuId;
                                this.collections.splice(i, 1);
                                alert("已取消收藏!");
                                //如果收藏为空就显示猜你喜欢
                                if (this.collections.length === 0) {
                                    alert("亲,您的收藏为空哦,为您推荐喜欢!");
                                    this.flag1=true;
                                    this.flag2=true;
                                }

                            }).catch((response) => {
                            alert("取消失败!");
                        });
                    })
                    .catch(() => {
                        // 未登录
                        alert("登录过期,请重新登录");
                        window.location.href = "http://www.leyou.com/login.html?returnUrl=" + window.location.href;
                    })
            },
            //分页单击切换页面
            btnClick(i){
                this.pagination.page=i;
                this.queryCollections();
            },
            //添加到购物车
            addCart(i) {
                // 判断是否登录
                ly.http.get("/auth/verify").then(() => {
                    // 已登录
                    ly.http.post("/cart", {
                        skuId: this.collections[i].skuId,
                        title: this.collections[i].title,
                        image: this.collections[i].images,
                        price: this.collections[i].price,
                        num: 1,
                        ownSpec:this.collections[i].ownSpec
                    }).then(() => {
                        this.deleteCollections(this.collections[i].skuId, i);
                        // 跳转到购物车列表页
                        window.location.href = "http://www.leyou.com/cart.html";
                    }).catch(() => {
                        alert("添加购物车失败，请重试！");
                    })
                }).catch(() => {
                    // 获取以前的购物车
                    const carts = ly.store.get("carts") || [];
                    // 获取与当前商品id一致的购物车数据
                    const cart = carts.find(c => c.skuId === this.collections[i].id);
                    if (cart) {
                        // 存在，修改数量
                        cart.num += this.num;
                    } else {
                        // 不存在，新增
                        carts.push({
                            skuId: this.collections[i].skuId,
                            title: this.collections[i].title,
                            image: this.collections[i].images,
                            price: this.collections[i].price,
                            num: 1,
                            ownSpec: this.collections[i].ownSpec
                        })
                    }
                    // 未登录
                    ly.store.set("carts", carts);
                    // 跳转到购物车列表页
                    window.location.href = "http://www.leyou.com/cart.html";
                })
            }
        },
        watch:{
            "pagination.page": function (newVal, oldVal) {
                if (newVal < 1) {
                    this.pagination.page = 1;
                } else if (newVal > this.total) {
                    this.pagination.page = this.total;
                }
            }
        },
        computed:{
            // ownSpecStr(){
            //     var parse = JSON.parse(this.collections[i].ownSpec);
            //     var jsonStr="{'颜色':"+parse[0].value+",'内存':"+parse[1].value+",'英寸':"+parse[2].value+"}";
            //     return jsonStr;
            // }
        },
        components: {
            shortcut: () => import("/js/pages/shortcut.js")
        }
    })
</script>

	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->
</html>